<template>
  <div>
    <h1>Parent</h1>
    <Child>
      <template>
        <a href="##">hello</a>
      </template>
      <template>
        <p>hello</p>
      </template>
      <template v-slot:center>
        <p>hello</p>
      </template>
    </Child>

    <Child :persons='persons'>
      <template #personMessage='{person}'>
        <div :style="{background:person.age>18?'pink':'red'}">
          {{person.name}} --{{person.age}}
        </div>
      </template>
    </Child>
  </div>
</template>

<script>
import Child from "./Child";
export default {
  name: "Parent",
  components: {
    Child,
  },
  data() {
    return {
      persons:[
        {id:'001',name:'one',age:18},
        {id:'002',name:'two',age:13},
        {id:'003',name:'three',age:26},
        {id:'004',name:'fore',age:21},
      ]
    };
  },
};
</script>

<style>
</style>